<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
			
			img {
				width: 55%;
			}
			
			.mui-plus .plus {
				display: inline;
			}
			
			.plus {
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			p {
				text-indent: 22px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-popover {
				height: 300px;
			}
			
			.mui-content {
				padding: 10px;
			}
			
			a {
				color: #000000;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">人工服务</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed human">
				<li class="mui-table-view-cell" id="17755810050">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../../images/headImg/mengzhang.png" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">孤雁</h4>
									<span class="oa-contact-position mui-h6">商务运营</span>
								</div>
								<p class="oa-contact-email mui-h6">
									QQ：2582394908 微信：AA19941205
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell" id="17755810050">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../../images/headImg/baiqi.png" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">孤雁</h4>
									<span class="oa-contact-position mui-h6">供应链合作</span>
								</div>
								<p class="oa-contact-email mui-h6">
									QQ：2582394908 微信：AA19941205
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-btn-outlined" id="17755810050">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../../images/headImg/hanxin3.png" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">Guyan</h4>
									<span class="oa-contact-position mui-h6">工厂合作</span>
								</div>
								<p class="oa-contact-email mui-h6">
									QQ：2582394908 微信：AA19941205
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li class="mui-table-view-cell" id="peopleHelp" name="17755810050">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="../../images/people/people.png" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">人工客服</h4>
								</div>
								<p class="oa-contact-email mui-h6">
									电话：17755810050
								</p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<a href="im-chat/im-chat.html">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="../../images/people/reboot.png" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">在线客服</h4>
									</div>
									<p class="oa-contact-email mui-h6">
										点击进入... ...
									</p>
								</div>
							</div>
						</div>
					</a>
				</li>
			</ul>
			<div class="mui-row">
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">

					<li class="mui-table-view-cell" id="email">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="../../images/email.png" />
								</div>
								<!--发送邮件-->
								<a href="mailto:zhangyi170cc@163.com">
									<div class="oa-contact-content mui-table-cell">
										<div class="mui-clearfix">
											<h4 class="oa-contact-name">邮件联系</h4>
										</div>
										<p class="oa-contact-email mui-h6">
											邮件地址：<span id="emailInfo">zhangyi170cc@163.com</span>
										</p>
									</div>
								</a>
							</div>
						</div>
					</li>

					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="../../images/message.png" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
									</div>
									<p class="oa-contact-email mui-h6">
										<p style="text-indent: 0;">
											<a href="#topPopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">发送短信</a>
										</p>
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover" style="height: 150px;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view message">
						<li class="mui-table-view-cell">
							<a href="#" class="mui-icon mui-icon-email" id="17755810050" name="你好，我想和你谈谈关于商务合作的事情">商务合作：孤雁</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#" class="mui-icon mui-icon-email" id="17755810050" name="你好，我想和你谈谈关于硬件采购方面的事情">供应链合作：孤雁</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#" class="mui-icon mui-icon-email" id="17755810050" name="你好，我想和你谈谈关于工厂合作方面的事情">工厂合作：孤雁</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
		<script src="../../js/myjs/localVarchar.js"/>
	<script src="../../js/ipjs/ip.js"></script>
	<script src="../../js/constatnt/var.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script>
		mui.toast('直接点击拨打电话');
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		//联系人
		mui(".human").on('tap', '.mui-table-view-cell', function() {
			var id = this.getAttribute("id");
			phone(id);
		});
		//客服联系
		document.getElementById("peopleHelp").addEventListener('tap', function() {
			var phonev = this.getAttribute("name");
			phone(phonev);
		});

		mui(".message").on('tap', 'a', function() {
			sendMessage([this.getAttribute("id")], this.getAttribute("name"));
		});

		//发送短信
		function sendMessage(phones, body) {
			var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS); //创建消息
			msg.to = phones; //要发送的号码
			msg.body = body; //发送的内容
			plus.messaging.sendMessage(msg);
		}
		//拨打电话
		function phone(id) {
			mui.confirm('是否联系？', '直接拨打电话', ['拨打', '放弃'], function(e) {
				if(e.index == 1) {
					plus.device.vibrate(50); //震动提示
					return;
				} else {
					plus.device.dial(id, false); //调用原声的拨打电话功能
				}
			});
		}
	</script>

</html>